import React from 'react';
import GitHubProxy from '@/components/GitHubProxy';
import { ArrowLeft, Github } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Link } from 'react-router-dom';

const GitHubProxyPage = () => {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50 p-4 md:p-8">
      <div className="max-w-4xl mx-auto">
        <div className="mb-6">
          <Button asChild variant="ghost">
            <Link to="/" className="flex items-center gap-2">
              <ArrowLeft size={16} />
              返回首页
            </Link>
          </Button>
        </div>
        
        <div className="flex items-center gap-3 mb-6">
          <Github className="text-gray-800" size={32} />
          <h1 className="text-2xl md:text-3xl font-bold text-gray-800">GitHub 代理服务</h1>
        </div>
        
        <div className="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200">
          <GitHubProxy />
        </div>
        
        <div className="mt-8 bg-white rounded-xl shadow-lg p-6 border border-gray-200">
          <h2 className="text-lg font-semibold mb-3">功能特点</h2>
          <ul className="list-disc pl-5 space-y-2 text-gray-700">
            <li>支持代理访问 GitHub 的 Releases、Raw、Archive 等资源</li>
            <li>自动缓存，提升访问速度</li>
            <li>支持大文件下载，无限制</li>
            <li>无需配置，直接使用</li>
            <li>支持 HTTPS 安全访问</li>
            <li>全球节点分发加速</li>
          </ul>
          
          <h2 className="text-lg font-semibold mt-6 mb-3">代理服务列表</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
            <div className="bg-gray-50 p-3 rounded border">
              <h3 className="font-medium">Cloudflare</h3>
              <p className="text-sm text-gray-600">https://gh-proxy.com/</p>
            </div>
            <div className="bg-gray-50 p-3 rounded border">
              <h3 className="font-medium">Fastly</h3>
              <p className="text-sm text-gray-600">https://cdn.gh-proxy.com/</p>
            </div>
            <div className="bg-gray-50 p-3 rounded border">
              <h3 className="font-medium">ghp.ml1.one</h3>
              <p className="text-sm text-gray-600">https://ghp.ml1.one/</p>
            </div>
            <div className="bg-gray-50 p-3 rounded border">
              <h3 className="font-medium">x.whereisdoge.work</h3>
              <p className="text-sm text-gray-600">https://x.whereisdoge.work/</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default GitHubProxyPage;
